<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

    <head>
        <title>Rasende Roboter</title>
        <link href="style/style.css" rel="stylesheet" type="text/css" media="screen" />
        <script src="/socket.io/socket.io.js" type="text/javascript"></script>
        <script src="script/logged.js" type="text/javascript"></script>

        <!-- favicon -->
        <link rel="shortcut icon" href="style/img/favicon.png"/>
        <link rel="icon" href="style/img/favicon.png"/>
    </head>
    <body class="body-logged" onload="init()">

        <div class="gameInfo">

            <div class="spinner"></div>
            <p>
                <span class="important  playerName ">Bienvenue <span id="player">__LOGIN__</span></span>
            </p>
            <span class="important">Nom de la partie :</span>
            <span id="log"> __IDGAME__ </span>

            <span id="state">__STATE__</span>
            <div id="timers">
                <div id="GameCounter">
                    <span class="important">Temps de jeu :</span>
                    <label id="minutes">00</label>:<label id="seconds">00</label>
                </div>
                <div id="winner"></div>
                <div id="FinalCounter">
                <span id="compte-a-rebours">
                        <span id="temps"></span>
                </span>
                    <label id="FinalCounterMinutes"></label><label id="FinalCounterSeconds"></label>
                </div>
            </div>

            <div>
                <span class="important" id="titre">Joueurs présents :</span>
                <input id="login" type="hidden" value="__LOGIN__"/>
                <input id="idGame" type="hidden" value="__IDGAME__"/>
                <div class="navbar">
                    <ul class="dropdown" id="players"/>
                </div>
            </div>
            <span class="important" id="titre">Nombre d'opérations : </span><span id="nboperations">0</span>
            <div id="selectedRobot">
            </div>
                <div id="touchPanel">
            </div>
            <br/>
            <a class="underline" onclick="alert(
            '1. Sélectionnez le robot à déplacer en cliquant dessus ou en appuyant sur la touche correspondant à la première lettre de la couleur du robot.\n' +
             '2. Deplacez le robot en cliquant sur la position désirée ou en utilisant les flèches.\n' +
              '3. La partie se termine quand le robot de la même couleur que la cible est dessus.')">Afficher instructions</a>
        </div>

        <div class="gamePanel">
            <div class="container" id="Participants">

                <div class="container" id="partie">
                    <div id="myBoard"></div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="span6">
                        <form method="get" action="/" id="backToLogin"></form>
                        <script> commencerJeu()</script>
                        <script> demarrerTempsDeJeu()</script>
                        <script>testerEtatDuJeu(document.getElementById("state").innerHTML);</script>
                    </div>
                </div>
            </div>

            <div id="joystickPanel"></div>
        </div>
        
    </body>
</html>